import React, { useState } from 'react';
import { Button, Select, Upload, message } from 'antd';
import memo from '../common/wrapMemo';
import style from './ImportModal.module.scss';
import { CloseOutlined } from '@ant-design/icons';
import { generateUUID } from '../../util/util';

const { Option } = Select;

const ImportModal = memo((props) => {
    const { layers = [], onClose, importData, userInfo } = props;
    const [disabled, setDisabled] = useState(true);
    const [select, setSelect] = useState({});

    const selectDom = () => {
        const firstOptions = layers.map((layer) => {
            return (
                <Option key={layer.key} value={layer.title} child={layer.children}>
                    {layer.title}
                </Option>
            );
        });
        let el = [
            <Select
                key={0}
                style={{
                    width: 120,
                    marginRight: 20,
                }}
                onChange={(value, option) => {
                    setSelect(option);
                    if (option.child) {
                        setDisabled(true);
                    } else {
                        setDisabled(false);
                    }
                }}
            >
                {firstOptions}
            </Select>,
        ];
        if (select?.child?.length) {
            const options = select.child.map((layer) => {
                return (
                    <Option key={layer.key} value={layer.title} child={layer.children}>
                        {layer.title}
                    </Option>
                );
            });
            const dom = (
                <Select
                    key={1}
                    style={{
                        width: 120,
                        marginRight: 20,
                    }}
                    onChange={(value, option) => {
                        setDisabled(false);
                        setSelect((prev) => {
                            return { ...prev, selChild: option };
                        });
                    }}
                >
                    {options}
                </Select>
            );
            el.push(dom);
        }
        return el;
    };

    return (
        <>
            <div className={style.importModal}>
                <div className={style.head}>
                    <span>请选择要导入的分类</span>
                    <CloseOutlined onClick={onClose} className={style.close} />
                </div>
                <div className={style.content}>
                    <div className={style.selWrap}>{selectDom()}</div>
                    <Upload
                        className={style.upload}
                        beforeUpload={importData}
                        action="/webapi/authority/uploadshpfile"
                        data={() => {
                            const uuid = generateUUID();
                            const layerNames = [select.value];
                            if (select.selChild) {
                                layerNames.push(select.selChild.value);
                            }
                            return {
                                uuid,
                                // layerName: layerNames.join(','),
                                type: layerNames.join('&'),
                                userName: userInfo.get('userName'),
                            };
                        }}
                        onChange={({ file }) => {
                            const { status, response } = file;
                            if (status === 'done') {
                                if (response.infocode === 10000) {
                                    message.success('导入成功');
                                    // file.status = 'success';
                                } else {
                                    message.error('导入失败');
                                    // file.status = 'error';
                                }
                                onClose();
                            }
                        }}
                    >
                        <Button disabled={disabled} className={style.passBtn}>
                            选择文件
                        </Button>
                    </Upload>
                </div>
            </div>
            <div className={style.mask}></div>
        </>
    );
});

export default ImportModal;
